<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="../css/Common.css">
    <!-- 引入我们白菜页面的css -->
    <link rel="stylesheet" href="../css/05-cabbage.css">
    <!-- 引入分辨屏幕的css -->
    <link rel="stylesheet" href="../css/media.css">
</head>
<body>
    <!-- 头部start -->
    <header>
        <div class="tool">
             <div class="tool-arrows"></div>
             <div class="tool-font">白菜价-淘宝内部券</div>
             <span class="tool-down"></span> 
        </div>
    </header>
    <!-- 头部 end -->

    <!-- nav滚动条 start -->
    <div class="nav">
        <ul class="nav-ul  clearfix">
            <li class="nav-li iScrollHorizontalScrollbar "><a href="#"></a></li>
        </ul>
    </div>
    <!-- nav滚动条 end -->
    
    <!-- 中间的大主体部分 start -->
    <div class="subject clearfix">

         <!-- <div class="main" id="main">
              <div class="main-l">
                   
              </div>
              <div class="main-r">
                   <p></p>
                   <p></p>
                   <p></p>
                   <p></p>
              </div>
         </div> -->
    </div>
</header>
<!-- 头部 end -->

<!-- nav start -->
<div class="nav">
    <ul class="nav-ul clearfix">
        <li class="nav-li"><a href="#"></a></li>
    </ul>
</div>
<!-- nav end -->

<!-- 中间的大主体部分 start -->
<div class="subject clearfix">

    <!-- <div class="main" id="main">
         <div class="main-l">

         </div>
         <div class="main-r">
              <p></p>
              <p></p>
              <p></p>
              <p></p>
         </div>
    </div> -->
</div>
<!-- 中间的大主体部分 end -->


</body>
</html>
<!-- 插入滚动条的插件 -->
<script src="../lib/iscroll.js"></script>
<!-- 插入jquery插件 -->
<script src="../js/jquery-1.12.2.min.js"></script>
<!-- 插入模板渲染插件 -->
<script src="../js/template.js"></script>

<!-- 设置滚动条的函数 start -->
<script>
    navScroll();

    function navScroll() {
      // 初始化
      var navs=new IScroll(".nav",{tap:true});
    
    
      document.querySelector(".nav .nav-ul .nav-li").addEventListener("tap",function () {
        console.log(123);
        
      })
      
    }
</script>
<!-- 设置滚动条的函数 end -->

<!-- 这个是nav的模板 start -->
<script type="text/template" id="menuTemplate">
    {{each result as val key}}
    <a href="{{val.titlehref}}" data-id="{{val.indexmenuid}}">
        {{val.title}}
        {{
        }}
    </a>
    {{/each}}
</script>
<!-- 里面是后台返回来的数据 -->
<script>
    render();

    function render() {
        $.ajax({
            url: 'http://193.112.55.79:9090/api/getbaicaijiatitle',
            type: 'get',
            dataType: 'json',
            success: function(res) {
                console.log(res);
                template.config('escape', false)
                if (res) {


                    var htmlStr = template('menuTemplate', res);
                    // console.log(htmlStr);

                    // 动态渲染数据
                    $('.nav-li > a').html(htmlStr);
                }
            }
        })
    }
</script>
<!-- nav end -->


<!-- 主体内容的模板 -->
<script type="text/template" id="main">
    {{each result as val key}}
    <div class="main" id="main">
        <div class="main-l">
            <a href="">{{val.productImg}}</a>
        </div>
        <div class="main-r">
            <p class="r-title">{{val.productName}}</p>
            <p class="productPrice">{{val.productPrice}}</p>
            <div class="number">{{val.productCouponRemain}}</div>
            <div class="coupon">{{val.productCoupon}}{{val.productHref}}</div>
        </div>
    </div>
    {{/each}}
</script>
<!-- 后台返回的数据 -->
<script>
    main();

    function main() {
        $.ajax({
            url: 'http://193.112.55.79:9090/api/getbaicaijiaproduct',
            type: 'get',
            dataType: 'json',
            data: {
                titleid: 0,
            },
            success: function (res) {
                console.log(res);
                template.config('escape', false)
                if (res) {

                    var htmlStr = template('main', res);
                    // console.log(htmlStr);

                    // 动态渲染数据
                    $('.subject').html(htmlStr);
                }
            }
        })
    }
</script>
<!-- 主体内容 end -->